import $ from 'jquery';
import styles from './index.module.less';
import { getMovies } from '@/api/movie';
import { creatMoveTags } from '@/movie/list';

let container;

/**
 * 初始化函数，负责创建容器
 */
function init() {
    container = $('<div>').addClass(styles.pager).appendTo('#app');
}

init();

/**
 * 根据传入的页面、页容量、总榜记录数。创建分页区域的标签
 * @param {*} page 
 * @param {*} limit 
 * @param {*} total 
 */
export function createPagers(page, limit, total) {
    container.empty();
    /**
     * 辅助函数，负责帮创建一个页码标签
     * @param {*} text 标签文本
     * @param {*} status 标签状态，''-普通状态，disabled-禁用状态，active-选中状态
     * @param {*} targetPage 
     */
    function createTag(text, status, targetPage) {
        const span = $('<span>').appendTo(container).text(text);
        span.addClass(styles[status]);
        // 只有是普通样式是，监听点击事件
        if (!status) {
            span.on('click', async () => {
                // 1. 重新获取数据
                const { data } = await getMovies(targetPage, limit);
                // 2. 重新渲染列表
                creatMoveTags(data.movieList);
                // 3. 重新渲染分页
                createPagers(targetPage, limit, data.movieTotal)
            });
        }
    }
    const pageNumber = Math.ceil(total / limit); // 向上取整
    // 创建首页
    createTag('首页', page === 1 ? 'disabled' : '', 1);
    // 创建上一页
    createTag('上一页', page === 1 ? 'disabled' : '', page - 1);
    // 创建数字页
    const maxCount = 10; // 最大页码的数量
    let min = Math.floor(page - maxCount / 2);
    if (min < 1) min = 1;
    let max = min + maxCount - 1;
    if (max > pageNumber) max = pageNumber;
    for (let i = min; i <= max; i++) {
        createTag(i, page === i ? 'active' : '', i);
    }
    // 创建下一页
    createTag('下一页', page === pageNumber ? 'disabled' : '', page + 1);
    // 创建尾页
    createTag('尾页', page === pageNumber ? 'disabled' : '', pageNumber);
}